<template>
  <select :value="value" class="na-select" @change="broadcast">
    <template v-for="(item, idx) in options">
      <option v-if="!simple" :value="item.value||item" :key='idx' class="na-option">{{item.label||item}}</option>
      <option v-if="simple" :value="idx" :key='idx' class="na-option">{{item}}</option>
    </template>
  </select>
</template>

<script>
export default {
  props: {
    value: {},
    options: {},
    simple: {default: false}
  },
  methods: {
    broadcast(e) {
      console.log(e.target.value)
      this.$emit("input", e.target.value)
    }
  },
  created(){
    console.log(this.value)
  }
}
</script>

<style lang="scss" scoped>
  .na-select{
    max-width: 200px;
    padding: 5px 2px;
    font-size: 14px;
    outline: none;
    &:focus {
      border: 1px solid $primary;
    }
  }
  .na-option{
    padding: 2px 1px;
  }
</style>
